<template>
  <cl-page
    class="detail-page"
    :back-top="true"
  >
    <view
      v-if="loading"
      class="detail-loading"
    >
      <view class="loading-spinner" />
      <text class="detail-loading__text">数据加载中...</text>
    </view>
    <block v-else>
      <swiper
        class="detail-swiper"
        indicator-dots
        circular
        autoplay
      >
        <swiper-item
          v-for="(image, index) in gallery"
          :key="index"
        >
          <image
            :src="image"
            class="detail-swiper__image"
            mode="aspectFill"
            @tap="previewImage(index)"
          />
        </swiper-item>
      </swiper>

      <view class="detail-content">
        <view class="detail-header">
          <text class="detail-title">{{ work.title }}</text>
          <cl-tag
            type="primary"
            rounded
          >{{ work.priceRange }}</cl-tag>
        </view>
        <text class="detail-subtitle">{{ work.subtitle }}</text>

        <view
          v-if="work.tags?.length"
          class="detail-tags"
        >
          <cl-tag
            v-for="tag in work.tags"
            :key="tag"
            type="success"
            plain
            rounded
          >
            {{ tag }}
          </cl-tag>
        </view>

        <cl-list
          :list="metaItems"
          border
        >
          <template #item="{ item }">
            <view class="meta-row">
              <text class="meta-row__label">{{ item.label }}</text>
              <text class="meta-row__value">{{ item.value }}</text>
            </view>
          </template>
        </cl-list>

        <view
          v-if="work.description"
          class="detail-section"
        >
          <text class="detail-section__title">作品简介</text>
          <text class="detail-section__text">{{ work.description }}</text>
        </view>

        <view
          v-if="work.photographer"
          class="detail-section"
        >
          <text class="detail-section__title">摄影师</text>
          <view class="photographer-card">
            <cl-image
              :src="work.photographer.avatarUrl"
              :height="140"
              :width="140"
              :pt="{ className: 'photographer-card__avatar' }"
            />
            <view class="photographer-card__body">
              <text class="photographer-card__name">{{ work.photographer.name }}</text>
              <text class="photographer-card__speciality">{{ work.photographer.speciality }}</text>
              <text class="photographer-card__experience">{{ work.photographer.experience }}</text>
              <view
                v-if="work.photographer.tags?.length"
                class="photographer-card__tags"
              >
                <cl-tag
                  v-for="tag in work.photographer.tags"
                  :key="tag"
                  type="info"
                  plain
                  rounded
                >
                  {{ tag }}
                </cl-tag>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>

    <view
      v-if="!loading"
      class="detail-footer"
    >
      <view class="detail-footer__price">
        <text class="detail-footer__label">参考价位</text>
        <text class="detail-footer__value">{{ work.priceRange }}</text>
      </view>
      <cl-button
        type="primary"
        color="#fff"
        class="detail-footer__button"
        rounded
        @tap="goBooking"
      >
        预约摄影
      </cl-button>
    </view>
  </cl-page>
</template>

<script setup>
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { fetchWorkDetail } from "@/services/gallery";

const work = ref({});
const gallery = ref([]);
const loading = ref(true);

const metaItems = computed(() => [
  { label: "拍摄时长", value: work.value?.duration || "-" },
  { label: "拍摄地点", value: work.value?.shootLocation || "-" },
  { label: "发布日期", value: work.value?.publishedAt || "-" }
]);

onLoad(async(options) => {
  const workId = options?.id;
  if (!workId) {
    uni.showToast({ title: "缺少作品编号", icon: "none" });
    setTimeout(() => {
      uni.navigateBack({ delta: 1 });
    }, 1500);
    return;
  }
  try {
    const detail = await fetchWorkDetail(workId);
    work.value = detail;
    const images = detail.gallery && detail.gallery.length ? detail.gallery : [detail.coverUrl];
    gallery.value = images.filter(Boolean);
  } catch (error) {
    uni.showToast({ title: error.message || "加载失败", icon: "none" });
    setTimeout(() => {
      uni.navigateBack({ delta: 1 });
    }, 2000);
  } finally {
    loading.value = false;
  }
});

function goBooking() {
  if (!work.value?.id) return;
  uni.navigateTo({ url: `/pages/booking/form?workId=${work.value.id}` });
}

function previewImage(currentIndex) {
  uni.previewImage({
    urls: gallery.value,
    current: currentIndex
  });
}
</script>

<style scoped lang="scss">
.detail-page {
  position: relative;
  min-height: 100vh;
  background: #f5f6f8;
  padding-bottom: calc(160rpx + env(safe-area-inset-bottom) + 100rpx);
}

.detail-loading {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  color: #666;
  font-size: 28rpx;
}

.loading-spinner {
  width: 48rpx;
  height: 48rpx;
  border: 4rpx solid #e5e5e5;
  border-top-color: #4286f3;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.detail-loading__text {
  font-size: 26rpx;
}

.detail-swiper {
  width: 100%;
  height: 520rpx;
}

.detail-swiper__image {
  width: 100%;
  height: 100%;
}

.detail-content {
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-title {
  font-size: 40rpx;
  font-weight: 700;
  color: #1f1f1f;
  flex: 1;
  margin-right: 24rpx;
}

.detail-subtitle {
  font-size: 28rpx;
  color: #666;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 24rpx 24rpx 0;
}

.meta-row__label {
  font-size: 26rpx;
  color: #666;
}

.meta-row__value {
  font-size: 28rpx;
  color: #222;
  max-width: 360rpx;
  text-align: right;
}

.detail-section {
  background: #fff;
  border-radius: 24rpx;
  padding: 28rpx;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.detail-section__title {
  font-size: 32rpx;
  font-weight: 600;
  color: #222;
}

.detail-section__text {
  font-size: 26rpx;
  color: #555;
  line-height: 1.6;
}

.photographer-card {
  display: flex;
  gap: 24rpx;
  align-items: center;
}

.photographer-card__avatar {
  border-radius: 50%;
}

.photographer-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.photographer-card__name {
  font-size: 32rpx;
  font-weight: 600;
  color: #111;
}

.photographer-card__speciality,
.photographer-card__experience {
  font-size: 26rpx;
  color: #666;
}

.photographer-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.detail-footer {
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 100rpx);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 32rpx;
  background: #fff;
  box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.08);
  z-index: 100;
}

.detail-footer__price {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.detail-footer__label {
  font-size: 24rpx;
  color: #999;
}

.detail-footer__value {
  font-size: 32rpx;
  font-weight: 600;
  color: #222;
}

.detail-footer__button {
  min-width: 240rpx;
}
</style>
